<template>
  <div class="app-container">
    <div class="filter-container">
      渠道号：<el-select
            size="mini"
            v-model="listQuery.channelItemId"
            remote
            :remote-method="getItems"
            filterable
            clearable
            placeholder="请选择渠道号">
      <el-option
              v-for="item in items"
              :key="item.id"
              :label="item.name"
              :value="item.id">
      </el-option>
    </el-select>
      日期：<el-date-picker
            size="mini"
            clearable
            v-model="dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
    </el-date-picker>

      <el-button v-waves class="filter-item" size="mini" type="primary" icon="el-icon-search"
                 @click="handleFilter">
        搜 索
      </el-button>
    </div>
    <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
    >
      <el-table-column label="#" type="index" prop="index" align="center" width="80">
      </el-table-column>
      <el-table-column label="日期" prop="recordDate" align="center">
        <template slot-scope="{row}">
          <span>{{ row.recordDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道号" prop="channelItemName" align="center">
        <template slot-scope="{row}">
          <span>{{ row.channelItemName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册数" prop="regCount" align="center">
        <template slot-scope="{row}">
          <span>{{ row.regCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="description" align="center">
        <template slot-scope="{row}">
          <span>{{ row.description }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>

  import { itemList, canalInputList } from '@/api/dash'
  import Pagination from '@/components/Pagination'
  import waves from '@/directive/waves'

  export default {
    name: 'StConvert',
    components: { Pagination },
    directives: { waves },

    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        items:[],
        dateRange:[],
        listQuery: {
          pageNo: 1,
          pageSize: 20,
          channelItemId: null,
          startDate: '',
          endDate: ''
        },
        loading: false
      }
    },
    created() {
      const that = this
      that.getList()
    },
    filters: {

    },
    methods: {
      getItems(query) {
        const that = this
        const { keyword } = query
        itemList(keyword).then(response => {
          that.items = response.data
        })
      },
      handleFilter() {
        const that = this
        that.listQuery.pageNo = 1
        that.getList()
      },
      getList() {
        const that = this
        that.listLoading = true
        const { channelItemId,pageNo, pageSize } = that.listQuery
        const startDate = that.dateRange != null ? that.dateRange[0] : null;
        const endDate = that.dateRange != null ? that.dateRange[1] : null;
        canalInputList({ itemId: channelItemId, startDate: startDate,
          endDate: endDate, pageNo: pageNo, pageSize: pageSize }).then(response => {
          that.list = response.data.dataList
          that.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    }
  }
</script>

<style scoped>

</style>

